<template>
    <div>
        <!--医生表-->
        <el-card shadow="always">
            <!--面包屑-->
            <div slot="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">医疗服务</a></el-breadcrumb-item>
                    <el-breadcrumb-item>医生管理</el-breadcrumb-item>
                    <span style="font-size: 25px;float: left;margin-left: -210px;margin-top: 30px;font-weight: bold">医生管理</span>
                </el-breadcrumb>
            </div>

            <!-- 搜索 -->
            <div style="margin-bottom: -5px;margin-left: -10px;margin-top: -30px">
                <h4>查询条件</h4>
                <el-form :inline="true" :model="params" class="demo-form-inline" style="margin-bottom: -20px">
                    <el-form-item label="医生姓名:">
                        <el-input v-model="params.dockerName" clearable placeholder=""
                                  style="width: 140px"></el-input>
                    </el-form-item>

                    <el-form-item label="医院名称:">
                        <el-input v-model="params.hospitalName" clearable placeholder=""
                                  style="width: 140px"></el-input>
                    </el-form-item>

                    <template>
                        <el-form-item label="一级科室:">
                            <el-select v-model="params.firstLevelId" placeholder="请选择">
                                <el-option label="全部" :value=null></el-option>
                                <el-option v-for="n in firstLevels" :key="n.id" :label="n.content"
                                           :value="n.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="findByPage" size="medium">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card shadow="always" style="margin-top: 15px">
            <div style="margin-bottom: 10px;margin-left: -65%">
                <span style="margin-right: 60px">医生列表</span>
                <el-button type="primary" icon="el-icon-search" size="medium" @click="showSave">添加</el-button>
                <el-button type="error" icon="el-icon-search" @click="batchDelete" size="medium">删除</el-button>
                <el-button @click="changeBoole(1)">上架</el-button>
                <el-button @click="changeBoole(0)">下架</el-button>
            </div>

            <!-- 表格 -->
            <el-table tooltip-effect="dark" border ref="multipleTable"
                      :data="tableData" @selection-change="handleSelectionChange">

                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="name" label="医生姓名" align="center"></el-table-column>
                <el-table-column prop="url" label="医生头像" align="center"></el-table-column>
                <el-table-column prop="field" label="医生职称" align="center"></el-table-column>
                <el-table-column prop="hospitalName" label="所属医院" align="center"></el-table-column>
                <el-table-column prop="department" label="所属科室" align="center"></el-table-column>

                <el-table-column prop="boole" label="是否上架" align="center">
                    <template slot-scope="scope">
                        {{scope.row.boole===0?'已上架':
                        scope.row.boole===1?'未上架':'数据错误'}}
                    </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope" style="padding-left: 20px">
                        <el-button type="text" size="small" style="color: green;padding-left: 20px" @click="updateDialog(scope.row)">查看详细</el-button>
                        <el-button type="text" size="small" style="color: green;padding-left: 20px"
                                   @click="updateTestReservation(scope.row)">设置挂号预约</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination style="margin-top: 10px;" background @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="[5, 10, 15]"
                           :current-page="params.pageNum"
                           :page-size="params.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageInfo.total">
            </el-pagination>

            <!-- 设置体检预约 -->
            <el-dialog title="设置体检预约" :visible.sync="dialogFormVisible"
                       :before-close="cancelForm" style="margin-top: 80px">
                <el-form style="margin-top: 30px" label-width="180px" :model="form">
                    <el-form-item label="二级科室:">
                        <el-input v-model="form.secondLevelName" clearable style="width: 220px"></el-input>
                    </el-form-item>
                </el-form>

                <!--操作-->
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" icon="el-icon-search" @click="submit" size="medium">确定</el-button>
                    <el-button @click="cancelForm">取消</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>
    export default {
        name: "Docker",
        data() {
            return {
                params: {
                    pageNum: 1,
                    pageSize: 5,
                    dockerName: '',         //医生名称
                    hospitalName: '',       //医院名称
                    firstLevelId: null,     //一级科室id
                },      //条件查询
                firstLevels: [],    //所有医院类型
                grades: [],    //所有医院等级
                dialogFormVisible: false,    //添加修改弹窗显示控制
                form: {
                    firstLevelId: null,
                    secondLevelName: ''
                },        //添加修改对象
                pageInfo: {
                    list:null,
                    total: null
                },    //分页对象
                tableData: [],   //显示数据
                multipleSelection: [],   //医院复选框
                reMultipleSelection: [],   //体检复选框
                reservations: [],        //体检预约
            }
        },
        methods: {
            //医院复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //体检复选框
            reHandleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //页码变更
            handleCurrentChange(val) {
                this.params.pageNum = val;
                this.findByPage();
            },
            //页大小变更
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.findByPage();
            },
            //条件 分页查询
            findByPage() {
                this.$axios.post('/ms_docker/findPageByCondition', this.params).then(resp => {
                    this.pageInfo = resp.data.data;
                    this.tableData = this.pageInfo.list;
                })
            },
            //重置按钮
            resetForm() {
                this.params = {
                    dockerName: '',         //医生名称
                    hospitalName: '',       //医院名称
                    firstLevelId: null,     //一级科室id
                }
            },
            //关闭弹窗，并清空输入框
            cancelForm() {
                this.dialogFormVisible = false;
                this.form = {};
            },
            //查看详细按钮
            updateDialog(row) {
                this.$router.push('/showDocker')
            },
            //设置体检预约按钮
            updateTestReservation() {
                this.$router.push('/showDocker')
            },
            //添加按钮
            showSave() {
                this.$router.push('/saveDocker')
            },
            //提交添加医院
            submit() {
                let info = {
                    id: null,
                    grade: 2,
                    name: this.form.secondLevelName,
                    pId: this.form.firstLevelId
                };
                this.$axios.post('/ms_department/update', info).then(resp => {
                    if (resp.data.code === 200) this.$message.success('修改成功')
                    else this.$message.error('修改失败')
                });
                this.cancelForm();
            },
            //批量更改上下架
            changeBoole(boole) {
                let ids = this.multipleSelection.map(n => n.id);
                this.$axios.post(`/ms_hospital/updateBoole/${boole}`, ids).then(resp => {
                    if (resp.data.data === 200) this.$message.success(`批量${boole === 1 ? '上架' : '下架'}成功`);
                    else this.$message.error(`批量${boole === 1 ? '上架' : '下架'}成功`);
                });
                this.findByPage();
            },
            //批量删除
            batchDelete() {
                let ids = this.multipleSelection.map(n => n.id);
                this.$axios.post('/ms_hospital/batchDelete', ids).then(resp => {
                    if (resp.data.data === 200) this.$message.success('批量删除成功');
                    else this.$message.error('批量删除失败');
                });
                this.findByPage();
            },
            //数据初始化
            //查询所有一级科室
            findAllFirstLevels() {
                this.$axios.get('/ms_department/listFindFirstPId').then(resp => {
                    this.firstLevels = resp.data.data;
                });
            },
        },
        created() {
            this.findAllFirstLevels();
            this.findByPage();
        }
    }
</script>


<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>